<template>
	<view class="content">
		<view class="nav-order">
			<text class="item" @click="toGroupOrder()">团购订单</text>
			<text class="item" :class="{current: tabCurrentIndex === 'skillGoods'}" @click="tabClick('skillGoods')">秒杀订单</text>
			<text class="item" @click="toServicesOrder()">服务订单</text>
		</view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current: tabCurrentIndex === item.state}" @click="tabClick(item.state)">
				{{item.text}}
			</view>
		</view>
		
		<!-- 秒杀订单 -->
		<template v-if="tabCurrentIndex === 'skillGoods'">
			<!-- <vc-order-skill></vc-order-skill> -->
		</template>
		
		<!-- 订单列表 -->
		<template v-else>
			<view v-for="(item,index) in orderList" :key="index" class="order-item">
				<view class="i-top b-b">
					<text class="time">{{item.createTime}}</text>
					<text class="state" style="color:#AAAAFF">{{getBillStat(item)}}</text>
					<text v-if="item.state===1001" class="del-btn iconfont iconreduce-fill" style="color: #AAAAFF;"
						@click="cancelOrder(item)"></text>
				</view>
				<view v-if="shopType == item.cartType">
					<view class="goods-box-single" @click="toOrderDetail(item)">
						<image class="goods-img" :src="item.coverPhoto || noPic" mode="aspectFill" @click.stop="toGoodsDetail(item)"></image>
						<view class="right">
							<text class="title clamp"> {{item.prodName}} <text class="price">{{item.price}}</text></text>
							<text class="attr-box">
								<text>.</text>
							</text>
							<text v-if="item.state != 1001">订单编号：{{item.cartId|cartIdChange}}</text>
						</view>
						<view class="action-box b-t" v-if="item.state == 1001">
							<view class="buy-num-box flex justify-between align-center">
								<view class="num-step">
									<uni-number-box @change="changeNum($event,item)" :step="1" :min="0"
										:value="item.cartNum | stringToInt">
									</uni-number-box>
								</view>
							</view>
						</view>
					</view>
					<view class="price-box">
						共
						<text class="num">{{item.cartNum}}</text>
						件商品，实付款
						<text class="price">{{getAmount(item)}}</text>
					</view>
					<view class="action-box b-t" v-if="item.state == 1001">
						<button class="action-btn" @click="cancelOrder(item)">取消</button>
						<button class="action-btn recom" @click="toGoodsPay(item)">立即下单</button>
					</view>
					<view class="action-box b-t" v-if="item.state == 2012">
						<button class="action-btn" @click="to_return(item)">退款</button>
					</view>
					<view class="action-box b-t" v-if="item.state == 2013">
						<button class="action-btn" @click="to_writeOff(item)">核销</button>
					</view>
					<view class="action-box b-t" v-if="item.state == 2002">
						<button class="action-btn" @click="to_return(item)">退款</button>
						<button class="action-btn" @click="_expeditingDelivery(item)">催发货</button>
						<button class="action-btn" @click="_viewExpress(item)">物流</button>
						
					</view>
					<view class="action-box b-t" v-if="item.state == 3003">
						<button class="action-btn" @click="comfirm(item)">确认收货</button>
						<button class="action-btn" @click="_viewExpress(item)">物流</button>
						
					</view>
					<view class="action-box b-t" v-if="item.state == 4004">
						<button class="action-btn" @click="to_comment(item)">评价</button>
						<button class="action-btn" @click="to_return(item)">退货</button>
						<button class="action-btn" @click="_viewExpress(item)">物流</button>
					
					</view>
				</view>
				<view v-if="homeMakingType == item.cartType">
					<view class="goods-box-single" @click="toHomemakingDetail(item)">
						<image class="goods-img" :src="item.coverPhoto" mode="aspectFill"></image>
						<view class="right">
							<text class="title clamp"> {{item.prodName}}</text>
							<text class="attr-box">
								<text>.</text>
							</text>
							<text v-if="item.state != 1001">订单编号：{{item.cartId|cartIdChange}}</text>
						</view>
					</view>
					<view class="price-box">
						共
						<text class="num">{{item.cartNum}}</text>
						件商品，实付款
						<text class="price">{{getAmount(item)}}</text>
					</view>
					<view class="action-box b-t" v-if="item.state == 1001">
						<button class="action-btn" @click="cancelOrder(item)">取消</button>
						<button class="action-btn recom" @click="toServicesPay(item)">立即下单</button>
					</view>
					
					<view class="action-box b-t" v-if="item.state == 2102">
						<button class="action-btn" @click="to_return(item)">退款</button>
						<button class="action-btn" @click="_expeditingDelivery(item)">催一下</button>
					</view>
					<view class="action-box b-t" v-if="item.state == 3103 && item.cartType =='3306'">
						<button class="action-btn" @click="_expeditingDelivery(item)">催一下</button>
					</view>
					<view class="action-box b-t" v-if="item.state == 3104">
						<button class="action-btn" @click="_toPay(item)">支付</button>
					</view>
					<view class="action-box b-t" v-if="item.state == 4004">
						<button class="action-btn" @click="to_comment(item)">评价</button>
					</view>
				</view>
			</view>
			<view class="" v-if="orderList.length==0 && tabCurrentIndex != 'skillGoods'">
				<vc-empty></vc-empty>
			</view>
		</template>
		<view class="no-data">没有更多数据</view>
		<view style="height: 50px;"></view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import vcEmpty from "@/components/vc-empty/vc-empty.vue";
	//import vcOrderSkill from "@/components/vc-order-skill/vc-order-skill.vue"
	import param from "../../constant/param"
	import {
		getOrderState,
		updateStoreCart,
		deleteStoreCart,
		getStoreCart,
		goodsUnifieldOrder,
		toPay,
		queryStoreOrderCart,
		expeditingDelivery,
		receiveStoreOrderCart
	} from '../../api/order/orderApi.js';
	import conf from '@/conf/config.js';
	

	export default {
		components: {
			uniLoadMore,
			vcEmpty,
			//vcOrderSkill
		},
		data() {

			return {
				conf: {},
				logi_corp: "",
				logi_no: "",
				logistics: [],
				shopType: param.CART_TYPE.SHOP,
				homeMakingType: param.CART_TYPE.HOMEMAKING,
				tabCurrentIndex: 1001,
				navList: getOrderState(),
				userInfo: {},
				cond: {
					userId: this.vc.getCurrentUser().userId,
					pagesize: 10,
					pagefrom: 1,
					stat: ""
				},
				orderList: [],
				skillOrderList: [], // 秒杀订单
				cartFlag: false,
				stat: 0,
				noPic: conf.commonBaseUrl+'h5/static/noPic.png'
				
			};
		},
		filters: {
			stringToInt(string) {
				return Number(string);
			},
			cartIdChange(cartId) {
				return cartId = cartId.replace(/[^\d]/g, "").replace(/(\d{4})(?=\d)/g, "$1 ");
			}
		},
		async onLoad(options) {
			let _stat = parseInt(options.stat);

			await this.vc.onLoad(options).then(_suc => {}, _err => {});
			if (this.vc.isEmpty(_stat) || _stat == null) {
				_stat = 1001;
			}
			this.stat = _stat;
			this.tabClick(_stat);
		},
		
		onShow() {
			if (this.tabCurrentIndex) {
				this.tabClick(this.stat);
			}
		},
		
		onReachBottom() {
			//this.load_list();
		},
		
		methods: {
			cancelOrder(e) {
				let _that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							deleteStoreCart({
									cartId: e.cartId,
									shopId: e.shopId
								})
								.then(res => {
									if (res.code == 0) {
										_that.vc.toast({
											icon: 'none',
											title: '删除成功'
										});
										_that.reload_list();
										return;
									}
								})
						}
					}
				});
			},
			// 数量
			changeNum: function(e, order) {
				let _that = this;
				if (e == order.cartNum) {
					return;
				}
				order.cartNum = e;
				_that._updateStoreCart(order);
			},
			_updateStoreCart: function(item) {
				let _that = this;
				if (_that.cartFlag) {
					return;
				}
				let _dataObj = {
					productId: item.productId,
					valueId: item.valueId,
					personId: item.personId,
					cartNum: item.cartNum,
					cartId: item.cartId
				};
				_that.cartFlag = true;
				updateStoreCart(_dataObj).then((data) => {
					if (data.code == 0) {
						_that.cartFlag = false;
					}
				})
			},
			comfirm(e) {
				let _that = this;
				receiveStoreOrderCart({
					orderId: e.orderId,
					personId: this.vc.getCurrentUser().userId,
					cartId: e.cartId,
					shopId: e.shopId
				}).then(_data => {
					_that.vc.toast({
						icon: 'none',
						title: '处理成功'
					});
					this.tabClick('4004');
				}, _err => {
					_that.vc.toast({
						icon: 'none',
						title: _err
					})
				})
			},
			toGoodsPay(item) {
				this.vc.navigateTo({
					url: '/pages/goods/goodsConfirm?shopId=' + item.shopId
				})
			},
			to_comment(e) {
				let objType = "";
				if (this.shopType == e.cartType) {
					objType = "1001";
				} else {
					objType = "2002";
				}
				this.vc.navigateTo({
					url: '/pages/appraise/appraise?cartId=' + e.cartId + "&shopId=" + e.shopId + "&productId=" + e
						.productId + "&objType=" + objType
				})
			},
			_toPay(item) {
				let _that = this;
				this.vc.navigateTo({
					url: '/pages/homemaking/homemakingPay?cartId=' + item.cartId + '&shopId=' + item.shopId
				})
			},
			toServicesPay(item) {
				this.vc.navigateTo({
					url: '/pages/homemaking/createOrder?cartId=' + item.cartId + '&shopId=' + item.shopId
				})
			},
			to_return(e) {
				this.vc.navigateTo({
					url: '/pages/storeOrderCartReturn/storeOrderCartReturn?shopId=' + e.shopId +
						"&orderId=" + e.orderId + "&cartId=" + e.cartId
				})
			},
			getAmount(e) {
				let _totalPrice = parseFloat(e.cartNum) * parseFloat(e.price);
				return _totalPrice.toFixed(2);
			},
			getBillStat(item) {
				if (item.state == 1001) {
					return "待付款"
				} else {
					return item.stateName
				}
			},
			set_stat() {
				this.cond.stat = this.tabCurrentIndex;
				if (0 == this.cond.stat) this.cond.stat = "";
			},
			reload_list() {
				this.orderList = [];
				this.cond.pagefrom = 1;
				this.load_list();
			},
			async load_list() {
				let that = this;
				
				// 秒杀订单
				if(this.tabCurrentIndex == 'skillGoods') {
					return;
				}
				// 团购订单
				else if(this.tabCurrentIndex == 'groupGoods') {
					return;
				}
				// 其他订单
				else if (this.tabCurrentIndex == 1001) {
					queryStoreOrderCart({
						personId: this.vc.getCurrentUser().userId,
						page: 1,
						row: 50,
						states: '2002,2012,2013,3003,4004,5005,6006,7007,8008,9009,2102,3103,3104,3004'
					}).then(res => {
						if (res.code === 0 && res.data.length > 0) {
							let _data = res.data;
							_data.forEach(item => {
								that.orderList.push(item);
							})
						}
					});
				} 
				else {
					let _state = this.tabCurrentIndex;
					queryStoreOrderCart({
						personId: this.vc.getCurrentUser().userId,
						cartType: param.CART_TYPE.SHOP,
						page: 1,
						row: 50,
						state: _state
					}).then(res => {
						if (res.code === 0 && res.data.length > 0) {
							let _data = res.data;
							_data.forEach(item => {
								that.orderList.push(item);
							})
						}
					});
				}
			},
			tabClick(e) {
				this.tabCurrentIndex = e;
				this.set_stat();
				this.reload_list();

			},
			_expeditingDelivery: function(_cart) {
				let _that = this;
				let _eventMsg = "";
				let _title = "";
				if (this.shopType == _cart.cartType) {
					_eventMsg = "用户催发货";
					_title = "已催商家发货";
				} else {
					_eventMsg = "用户催上门";
					_title = "已催商家上门";
				}
				expeditingDelivery({
					orderId: _cart.orderId,
					cartId: _cart.cartId,
					personId: _that.vc.getCurrentUser().userId,
					eventMsg: _eventMsg,
					shopId: _cart.shopId
				}).then(_data => {
					_that.vc.toast({
						icon: 'none',
						title: _title
					})
				})
			},
			to_writeOff:function(_cart){
				uni.navigateTo({
					url:'/pages/order/writeOffOrder?orderId='+_cart.orderId+"&shopId=" + _cart.shopId
				})
			},
			_viewExpress:function(_cart){
				uni.navigateTo({
					url:'/pages/order/express?orderId='+_cart.orderId+"&shopId=" + _cart.shopId
				})
			},
			toOrderDetail: function(_cart) {
				uni.navigateTo({
					url:'/pages/order/detail?orderId='+_cart.orderId+"&address=" + _cart.address+"&addressUser=" + _cart.addressUser+"&prodName=" + _cart.prodName+"&stateName=" + _cart.stateName+"&tel=" + _cart.tel+"&totalPrice=" + _cart.totalPrice+"&payPrice=" + _cart.payPrice+"&cartNum=" + _cart.cartNum+"&coverPhoto=" + _cart.coverPhoto+"&createTime=" + _cart.createTime+"&price=" + _cart.price+"&state=" + _cart.state+"&cartType=" + _cart.cartType
				})
			},
			toGoodsDetail: function(_cart) {
				this.vc.navigateTo({
					url: '/pages/goods/goods?productId=' + _cart.productId + "&shopId=" + _cart.shopId
				})
			},
			toHomemakingDetail: function(_cart) {
				this.vc.navigateTo({
					url: '/pages/homemaking/detail?servId=' + _cart.productId + "&shopId=" + _cart.shopId
				})
			},
			toGroupOrder() {
				uni.navigateTo({
					url:'/pages/myOrder/myGroupProductOrder'
				})
			},
			toServicesOrder() {
				uni.navigateTo({
					url:'/pages/homemaking/order'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.nav-order {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 0 10rpx;
		.item {
			position: relative;
			display: flex;
			align-items: center;
			height: 80rpx;
			padding: 0 25rpx;
			&.current {
				color: #fa436a;
			}
			&.current:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid #fa436a;
			}
		}
	}
	
	page,
	.content {
		background: #f8f8f8;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 26rpx;
			color: #333333;
			position: relative;

			&.current {
				color: #fa436a;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #fa436a;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: 28upx;
			color: #333333;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: #fa436a;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: 32upx;
				color: #f8f6fc;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid #a6a9b0;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: 28upx + 2upx;
					color: #333333;
					line-height: 1;
				}

				.attr-box {
					font-size: 24upx + 2upx;
					color: #f8f6fc;
					padding: 10upx 12upx;
				}

				.price {
					font-size: 28upx + 2upx;
					color: #333333;

					&:before {
						content: '￥';
						font-size: 24upx;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: 24upx + 2upx;
			color: #000000;

			.num {
				margin: 0 8upx;
				color: #333333;
			}

			.price {
				font-size: 32upx;
				color: #333333;

				&:before {
					content: '￥';
					font-size: 24upx;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: 26upx;
			color: #333333;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: #fa436a;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}


	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}

	.uni-load-more__img>view {
		position: absolute
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}

	.load2 {
		transform: rotate(30deg)
	}

	.load3 {
		transform: rotate(60deg)
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s
	}

	.load2 view:nth-child(1) {
		animation-delay: .13s
	}

	.load3 view:nth-child(1) {
		animation-delay: .26s
	}

	.load1 view:nth-child(2) {
		animation-delay: .39s
	}

	.load2 view:nth-child(2) {
		animation-delay: .52s
	}

	.load3 view:nth-child(2) {
		animation-delay: .65s
	}

	.load1 view:nth-child(3) {
		animation-delay: .78s
	}

	.load2 view:nth-child(3) {
		animation-delay: .91s
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}
</style>